<template>
    <div>
    <ul>
        <li v-for="detail in details" :key="detail.id">
            <!-- <router-link :to="`/home/message/detail/${detail.id}/${detail.title}`">{{ detail.title }}</router-link>&nbsp;&nbsp; -->
            <router-link :to=" {
                name:'detail',
                query:{
                    id:detail.id,
                    title:detail.title
                }
            }">{{ detail.title }}</router-link>&nbsp;&nbsp;
            <button @click="pushShow(detail)">push</button>
            <button @click="replaceShow(detail)">replace查看</button>
            &nbsp;&nbsp;
        </li>
    </ul>
    <hr>    
    <router-view></router-view>
</div>
</template>

<script>
export default {
name: 'MessageTest',
data(){
    return {
        details:[{
            id:'001',
            title:'message001',
        },
        {
            id:'002',
            title:'message002',
        },
        {
            id:'003',
            title:'message003',
        },
    ]
    }
},
methods:{
    pushShow(d){
        this.$router.push({
            name:'detail',
            query:{
                id:d.id,
                title:d.title
            }
        })
    },
    replaceShow(d){
        this.$router.replace({
            name:'detail',
            query:{
                id:d.id,
                title:d.title
            }
        })
    }
}
}
</script>

<style>

</style>